<template>
    <div class="chat-bg">
        <div class="chat-left">
            <div class="chat-left-body" v-loading="loading">
                <el-empty v-if="!markdownContent" description="暂无数据" />
                <MarpitViewer v-else :markdown-content="markdownContent"></MarpitViewer>
            </div>
        </div>
        <div class="chat-container">
            <span style="color: #fff;margin-bottom: 10px;"> PPT生成助手 </span>
            <div class="messages" ref="messagesContainer">
                <div v-for="(message, index) in messages" :key="index" :class="message.sender">
                    <template v-if="message.type === 'text'">
                        {{ message.text }}
                    </template>
                    <template v-else-if="message.type === 'link'">
                        PPT下载地址为 <a :href="message.url" target="_blank">点击下载</a>
                    </template>
                </div>
            </div>
            <div class="input-container">
                <el-input style="margin-right: 10px;" v-model="userInput" @keyup.enter="sendMessage"
                    placeholder="请输入ppt主题，如：计算机科学与技术" />
                <el-button type="primary" @click="sendMessage">Send</el-button>
            </div>
        </div>
    </div>
    <el-dialog title="请选择一个模板" v-model="dialogSelectTemplate">
        <el-table 
            :data="templateList"
            highlight-current-row
            @current-change="handleCurrentChange"
            >
            <el-table-column prop="name" label="模板名称"></el-table-column>
        </el-table>
        <template #footer>
            <el-button type="primary" @click="dialogSelectTemplate = false">确 定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import MarpitViewer from "../components/MarpitViewer/index.vue"
import { ref, onMounted, nextTick } from 'vue';
import axios from 'axios';
// const markdownContent = ref(`---
// marp: true
// theme: gaia
// paginate: true
// _class: lead
// ---

// <!-- backgroundImage: url('https://superlu-demo.oss-cn-beijing.aliyuncs.com/15b5fcebefa240399692b553f1831727.svg') -->

// # {{title}}

// ---

// # 目录
// <!-- backgroundImage: url('https://marp.app/assets/hero-background.svg') -->
// {{menuList}}

// ---
// {{111}}666666

// ---

// # 谢谢朋友们`)
const markdownContent = ref(``)

const messages = ref([
    // { sender: 'bot', type: 'text', text: 'Hello! How can I assist you today?' }
]);
const loading=ref(false);
const template_id = ref('');
const templateList=ref([]);
const dialogSelectTemplate=ref(true);
const userInput = ref('计算机科学与技术');
const messagesContainer = ref(null);

const scrollToBottom = () => {
    const container = messagesContainer.value;
    if (container) {
        container.scrollTop = container.scrollHeight;
    }
};

const sendMessage = () => {
    if (userInput.value.trim() !== '') {
        messages.value.push({ sender: 'user', text: userInput.value });
        let user_input=userInput.value;
        userInput.value = '';
        nextTick(scrollToBottom);
        // Simulate bot response
        setTimeout(() => {
            messages.value.push({ sender: 'bot',type: 'text',  text: '好的正在为您生成'});
            loading.value=true;
            axios.get('/api/api/ai/chat/generate_ppt?user_input='+user_input+"&template_id="+template_id.value).then(res => {
                loading.value=false;
                markdownContent.value = res.data.data.content;
                messages.value.push({ sender: 'bot', text: '已为您生成！' });
                messages.value.push({ sender: 'bot', type: 'text', type: 'link', url: res.data.data.ppt_url});
            })
            nextTick(scrollToBottom);
        }, 1000);
    }
};
const initTemplateList=()=>{
    axios.get('/api/api/ppt/template/list').then(res=>{
        templateList.value=res.data.data;
    })
}
const handleCurrentChange=(val)=>{
    template_id.value=val.id;
}
onMounted(() => {
    scrollToBottom();
    initTemplateList()
});
</script>

<style lang="less" scoped>
.chat-bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #5018f9;
    background-image: url(/public/bg.png);
    background-size: cover;
    /* 使背景图自适应 */
    background-position: center;
    /* 居中背景图 */
    display: flex;
    justify-content: space-between;
}

.chat-left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;

    &-body {
        width: 100%;
        background-color: #fff;
        margin: 50px;
        border-radius: 14px;
    }
}

.chat-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    border-radius: 12px;
    padding: 20px;
    background-color: #000;
    margin: 20px;
}

.messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 10px;
    /* background-color: #ffffff; */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.messages .bot {
    text-align: left;
    color: #007bff;
    background-color: #fff;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
    width: fit-content;
}

.messages .user {
    color: #fff;
    background-color: #4e3eff;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 10px;
    width: fit-content;
}

.input-container {
    display: flex;
    /* background-color: #f1f1f1; */
    padding: 10px;
    border-radius: 8px;
}
</style>